<template>
  <div ref="topChartRef" />
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, markRaw, defineProps } from "vue";
import * as echarts from "echarts";

// 接收参数
const props = defineProps({
  data: Array
});
const apiData = props.data.reverse();

// 图表绘制逻辑
const topChartRef = ref<HTMLDivElement | null>(null);
const topChartRefInstance = ref<echarts.ECharts | null>(null);
const initTopOption = ref<echarts.EChartOption>({});

let toolTimer = ref<any>(null);

let yData = apiData.map(item => item.name);
let xData = apiData.map(item => item.value);

initTopOption.value = {
  // backgroundColor: "#091636",
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow"
    },
    backgroundColor: "rgba(13, 64, 71, 0.9)",
    borderColor: "rgba(143, 225, 252, 0.9)",
    padding: 8,
    textStyle: {
      color: "#ffffff"
    }
  },
  grid: {
    top: "2%",
    left: "-5%",
    right: "6%",
    bottom: "-8%",
    containLabel: true
  },
  xAxis: {
    type: "value",
    show: false
  },
  yAxis: {
    type: "category",
    data: yData,
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      margin: 80,
      align: "left",
      color: "#6a6a6a",
      formatter: function (value, index) {
        let ind = index + 1;
        if (ind == yData.length) {
          return "{one|" + (yData.length - index) + "} {a|" + value + "}";
        } else if (ind + 1 == yData.length) {
          return "{two|" + (yData.length - index) + "} {b|" + value + "}";
        } else if (ind + 2 == yData.length) {
          return "{three|" + (yData.length - index) + "} {c|" + value + "}";
        }
        if (yData.length - index > 9) {
          return "{five|" + (yData.length - index) + "} {d|" + value + "}";
        }
        return "{four|" + (yData.length - index) + "} {d|" + value + "}";
      },
      rich: {
        // 第一名
        one: {
          backgroundColor: "#07ff00",
          color: "#ffffff",
          width: 12,
          height: 16,
          padding: [1, 0, 0, 5],
          borderRadius: 10,
          fontSize: 13
        },
        // 第二名
        two: {
          backgroundColor: "#FF9845",
          color: "#ffffff",
          width: 12,
          height: 16,
          padding: [1, 0, 0, 5],
          borderRadius: 10,
          fontSize: 13
        },
        // 第三名
        three: {
          backgroundColor: "#F6BD16",
          color: "#ffffff",
          width: 12,
          height: 16,
          padding: [1, 0, 0, 5],
          borderRadius: 10,
          fontSize: 13
        },
        // 一位数
        four: {
          backgroundColor: "#33CCCC",
          color: "#ffffff",
          width: 12,
          height: 16,
          padding: [1, 0, 0, 5],
          borderRadius: 10,
          fontSize: 13
        },
        // 两位数
        five: {
          backgroundColor: "#33CCCC",
          color: "#ffffff",
          width: 16,
          height: 16,
          padding: [1, 0, 0, 1],
          borderRadius: 10,
          fontSize: 13
        }
      }
    }
  },
  series: [
    {
      type: "bar",
      showBackground: false,
      label: {
        show: true,
        position: "right",
        color: "#6a6a6a",
        formatter: "{c}"
      },
      barWidth: 15,
      itemStyle: {
        emphasis: {
          barBorderRadius: 7
        },
        //颜色样式部分
        normal: {
          barBorderRadius: 8,
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: "rgba(51, 204, 204,.4)" },
            { offset: 1, color: "rgba(51, 204, 204, 1)" }
          ])
        }
      },
      data: xData
    }
  ]
};

const initTopChart = () => {
  if (topChartRef.value) {
    topChartRefInstance.value = markRaw(echarts.init(topChartRef.value));
    topChartRefInstance.value.setOption(initTopOption.value, true);
  }
};

// // tooltip自动轮播 若使用请做销毁处理
// if (initTopOption.value && typeof initTopOption.value === "object") {
//   let index = 0;
//   toolTimer.value = setInterval(function () {
//     topChartRefInstance.value.dispatchAction({
//       type: "showTip",
//       seriesIndex: 0,
//       dataIndex: index
//     });
//     index++;
//     if (index >= 7) {
//       index = 0;
//     }
//   }, 2800);
// }

// 挂载后动作 -- 初始化图表
onMounted(() => {
  initTopChart();
  // 图表自适应
  window.addEventListener("resize", () => {
    if (topChartRefInstance.value) {
      topChartRefInstance.value.resize();
    }
  });
});

// 销毁前动作 -- 销毁图表
onBeforeUnmount(() => {
  if (topChartRefInstance.value) {
    topChartRefInstance.value.dispose();
  }
  if (toolTimer.value) {
    clearInterval(toolTimer.value);
  }
});
</script>

<style scoped lang="scss"></style>
